<template>
  <vab-query-form>
    <vab-query-form-top-panel v-if="ctx.data.showQuery">
      <el-form inline label-position="right" label-width="80px" @submit.prevent>
        <slot name="querys"></slot>
        <el-form-item>
          <el-button :icon="Search" type="primary" @click="ctx.loadList()">
            查询
          </el-button>
          <el-button @click="ctx.resetQuery()">
            <vab-icon icon="anticlockwise-line" />
            重置
          </el-button>
          <vab-query-fold v-model:fold="ctx.data.fold" />
        </el-form-item>
      </el-form>
    </vab-query-form-top-panel>
    <vab-query-form-left-panel :span="16">
      <slot name="info"></slot>
    </vab-query-form-left-panel>
    <vab-query-form-right-panel :span="8">
      <slot name="btns"></slot>
    </vab-query-form-right-panel>
  </vab-query-form>

  <el-table
    v-loading="ctx.data.loading"
    :data="ctx.data.list"
    :height="state.height"
    stripe
    style="width: 100%"
    v-bind="$attrs"
    @selection-change="ctx.selectionChange"
    @sort-change="ctx.sortChange"
  >
    <slot name="columns"></slot>
    <template #empty>
      <el-empty description="暂无数据" :image-size="60" />
    </template>
  </el-table>
  <el-pagination
    v-if="ctx.data.totalCount > 0"
    :current-page="ctx.data.pageNo"
    :layout="ctx.data.pageLayout"
    :page-size="ctx.data.pageSize"
    :total="ctx.data.totalCount"
    @current-change="ctx.pageNoChange"
    @size-change="ctx.pageSizeChange"
  />
</template>
<script setup>
  /* eslint-disable */
  import useList from '@/hooks/useList'
  import { Search } from '@element-plus/icons-vue'
  const $baseTableHeight = inject('$baseTableHeight')
  const props = defineProps({
    context: {
      type: Object,
      default: function () {},
    },
    res: {
      type: String,
      default: '',
    },
    autoLoad: {
      type: Boolean,
      default: true,
    },
  })
  const state = reactive({
    height: $baseTableHeight(2),
  })
  let ctx = reactive({})
  if (
    props.context == undefined &&
    props.res != undefined &&
    props.res.length > 0
  ) {
    ctx = useList({ res: props.res, autoLoad: props.autoLoad })
  } else if (props.context) {
    ctx = props.context
  }

  onMounted(() => {})

  defineExpose({
    ctx,
  })
</script>
